<template>
	<view class="category-pages" :class="themeName" :style="[pageStyle]">
		<view class="brand-bg p-20 flex" :style="[brandBgStyle]">
			<u-avatar :src="brand_info.image" mode="square" size="80"></u-avatar>
			<view class="m-l-10">
				<view :style="{
				  'font-size': `${$px2rpx(brandStyles.title_font_size)}rpx`,
				  color: brandStyles.title_color
				}">{{brand_info.name}}</view>
				<view v-if="brandContent.show_subtitle" :style="{
				  'font-size': `${$px2rpx(brandStyles.subtitle_font_size)}rpx`,
				  color: brandStyles.subtitle_color
				}">{{brand_info.brand_desc||''}}</view>
			</view>
		</view>
		<view class="sort">
			<!-- 综合 -->
			<view :class="['sort-item', { 'sort-item--active': !search.price && !search.sale }]"
				@tap="handSortOptions('all')">
				<text>{{$zhTran('综合')}}</text>
			</view>
			<!-- 价格 -->
			<view :class="['sort-item', { 'sort-item--active': search.price }]" @tap="handSortOptions('price')">
				<text>{{$zhTran('价格')}}</text>
				<sort-icon class="m-l-10" :status="search.price" :active-color="themeColor" />
			</view>
			<!-- 销量 -->
			<view :class="['sort-item', { 'sort-item--active': search.sale }]" @tap="handSortOptions('sale')">
				<text>{{$zhTran('销量')}}</text>
				<sort-icon class="m-l-10" :status="search.sale" :active-color="themeColor" />
			</view>
			<view class="sort-item">
				<u-icon name="grid-fill" size="40" :color="brandCardStyle === 'square'?'red':''" class="m-r-20"
					@click="brandCardStyle ='square' "></u-icon>
				<u-icon name="list" size="46" :color="brandCardStyle === 'rectangle'?'red':''"
					@click="brandCardStyle ='rectangle'"></u-icon>
			</view>
		</view>
		<BrandCategory class="category" :content="brandContent" :styles="brandStyles" :height="height" :search="search"
			:brandCardStyle="brandCardStyle" />
		<!-- #ifdef MP -->
		<view class="tabbar">
			<tabbar :common="styles" />
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="tabbar" style="position: fixed;z-index: 999999;">
			<tabbar :common="styles" />
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {
		apiGetPage
	} from "@/api/store";
	import {
		apiGoodsLists,
		apiBrandDetail
	} from "@/api/goods";
	import {
		getRect
	} from "@/utils/tools";
	import Cache from "@/utils/cache";
	import BrandCategory from '@/bundle/components/brand-category/category.vue'
	export default {
		name: 'categoryTop',
		mixins: [MescrollMixin],
		components: {
			BrandCategory
		},
		data() {
			return {
				brand_info: {},
				brandStyles: {},
				brandContent: {},
				styles: {},
				pagesData: [],
				height: 0,
				goodsList: [],
				category_id: -1,
				search: {
					price: "", // 价格排序: desc-降序; asc-升序;
					sale: "", // 销量排序: desc-降序; asc-升序;
					brand_id: "", //品牌
				},
				brandCardStyle: 'square'
			};
		},
		onLoad() {
			const options = this.$Route.query;
			this.search.brand_id = options.id;
			apiGetPage({
				type: 2,
			}).then((res) => {
				const {
					common: {
						title
					},
					common,
					content,
				} = this.$zhTran(res);
				this.styles = common;
				this.pagesData = content;
				this.$nextTick(() => {
					this.getHeight();
					this.getBrandPage()
					this.getBrand()
				});
			});
		},
		computed: {
			pageStyle() {
				const {
					background_color,
					background_image,
					background_type
				} = this.styles;
				if (background_type == 0 || !background_image || !background_color) {
					return;
				}
				const style =
					background_type == 1 ? {
						"background-color": background_color,
					} : {
						"background-image": `url(${background_image})`,
					};
				return style;
			},
			brandBgStyle() {
				return {
					margin: `${this.brandStyles.sub_margin}px`,
					padding: `${this.brandStyles.sub_padding_top}px ${this.brandStyles.sub_padding_horizontal}px ${this.brandStyles.sub_padding_bottom}px`,
					'border-radius': `${this.brandStyles.border_radius_top}px ${this.brandStyles.border_radius_top}px ${this.brandStyles.border_radius_bottom}px ${this.brandStyles.border_radius_bottom}px`,
					'background-color': this.brandStyles.brand_bg_color
				}
			}
		},
		methods: {
			async getHeight() {
				const category = await getRect(".category");
				this.height = category.height;
			},
			upCallback(page) {
				const pageNum = page.num;
				const pageSize = page.size;

				apiGoodsLists({
						page_no: pageNum,
						page_size: pageSize,
					})
					.then(({
						lists,
						page_size,
						count
					}) => {
						// 如果是第一页需手动置空列表
						if (page.num == 1) this.goodsList = [];
						// 重置列表数据
						this.goodsList = [...this.goodsList, ...lists];
						this.goodsList = this.$zhTran(this.goodsList)
						this.mescroll.endBySize(page_size, count);
					})
					.catch(() => {
						this.mescroll.endErr();
					});
			},
			// 排序方式
			handSortOptions(type) {
				switch (type) {
					case "all":
						this.$set(this.search, "sale", "");
						this.$set(this.search, "price", "");
						break;
					case "sale":
						this.$set(this.search, "price", "");
						this.$set(this.search, "sale", this.getSortReverse(this.search.sale));
						break;
					case "price":
						this.$set(this.search, "sale", "");
						this.$set(this.search, "price", this.getSortReverse(this.search.price));
						break;
				}
			},

			// 获取反向排序
			getSortReverse(sort) {
				switch (sort) {
					case "asc":
						return "desc";
					case "desc":
						return "asc";
					default:
						return "desc";
				}
			},
			getBrand() {
				apiBrandDetail({
					id: this.search.brand_id
				}).then((res) => {
					this.brand_info = res
				})
			},
			getBrandPage() {
				apiGetPage({
					type: 7,
				}).then((res) => {
					const {
						common: {
							title
						},
						common,
						content,
					} = this.$zhTran(res);
					let atitle = content[0].title
					uni.setNavigationBarTitle({
						title: atitle,
					});
					this.brandStyles = content[0].styles
					this.brandContent = content[0].content
					this.brandCardStyle = this.brandContent.show_type
					switch (this.brandContent.sort_type) {
						case 1:
							this.handSortOptions('all')
							break;
						case 2:
							this.$set(this.search, "price", "");
							this.$set(this.search, "sale", 'desc');
							break;
						case 3:
							this.$set(this.search, "price", "");
							this.$set(this.search, "sale", 'asc');
							break;
						case 4:
							this.$set(this.search, "sale", "");
							this.$set(this.search, "price", 'desc');
							break;
						case 5:
							this.$set(this.search, "sale", "");
							this.$set(this.search, "price", 'asc');
							break;
					}
				});
			}
		}, // 使用mixin (在main.js注册全局组件)
	};
</script>

<style lang="scss">
	.brand-bg {
		height: 120rpx;
	}

	/*根元素需要有固定的高度*/
	page {
		height: 100%;
		box-sizing: border-box;
		// 支付宝小程序,钉钉小程序需添加绝对定位,否则height:100%失效: https://opendocs.alipay.com/mini/framework/acss#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98
		/* #ifdef MP-ALIPAY || MP-DINGTALK*/
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;

		/* #endif */
		/*需给父元素设置height:100%*/
		.category-pages {
			height: 100%;
			display: flex;
			flex-direction: column;
			background-repeat: no-repeat;
			background-size: 100% auto;

			/* 中间 */
			.category {
				flex: 1;
				min-width: 0;
				min-height: 0;
				/* 需给flex:1的元素加上最小高,否则内容超过会溢出容器 (如:小程序Android真机) */
				display: flex;
				flex-direction: column;
			}
		}
	}

	.sort {
		display: flex;
		align-items: center;
		height: 80rpx;
		font-size: $-font-size-nr;
		background-color: #ffffff;

		&-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		&-item--active {
			@include font_color();
		}

		&-style {
			position: relative;
			width: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			&::before {
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				display: block;
				content: "";
				height: 1em;
				border-left: $-solid-border;
			}
		}
	}
</style>